<template>
  <el-form class='yform yform100' :inline="true" :model='form' label-width='160px' label-position='left'>
    <div class="yform-div">
      <el-form-item label='流程说明'>
          这是一个测试的流程，目前功能还不完善
      </el-form-item>
      <el-form-item label='紧急程度'>
          <el-radio-group v-model='form.opurg'>
            <el-radio label='1'><span style='color:red'>紧急</span></el-radio>
            <el-radio label='2'><span style='color:blue'>急</span></el-radio>
            <el-radio label='3'><span>一般</span></el-radio>
          </el-radio-group>
      </el-form-item>
      <el-form-item label='即将流向'>
          {{ state.toExmen }}
      </el-form-item>
      <el-form-item label='处理意见'>
          <el-input v-model='form.opnot' type='textarea' :rows='5' placeholder=' '/>
      </el-form-item>
      <el-form-item label='附件'>
          <el-upload class='upload-demo' action='https://jsonplaceholder.typicode.com/posts/' v-model:file-list='fileList'>
            <el-button type='primary'>上 传</el-button>
          </el-upload>
      </el-form-item>
      <div class="yform-item" style="padding-left: 6px">
        <el-checkbox v-model='state.chtag' @change='toggleFlowChart'>流程图</el-checkbox>
      </div>
      <div class="yform-item" v-show='state.chtag'>
        <div style='background-color: white;height:1000px'>
          <Modeler2 />
        </div>
      </div>
    </div>
  </el-form>
</template>

<script lang='ts' setup>
import {defineExpose, onMounted, reactive, toRaw, toRefs} from 'vue';
import {useRoute} from 'vue-router';
import request from "/@/utils/request";
import Modeler2 from '/@/comps/Activiti/modeler2/index';
import {BpmnStore} from "/@/bpmn/store";

const route = useRoute();

const state = reactive({
  form: {opurg:'3'} as any,
  chtag: true,
  params: {
    path: '',
    query: '',
  },
  toExmen: '',
  tarno:'',
  xml: null as any,
});

const {
  form, params,
} = toRefs(state);


onMounted(async () => {
  state.params = <any>route;
  if (params.value.query?.id) {

  }
  toggleFlowChart();
});


const getOperateInfo = () => {
  return toRaw(form.value);
};


defineExpose({getOperateInfo});


const props = defineProps({
  temid: String,
});


const toggleFlowChart = async () => {
  if (!state.xml) {
    const map= await request({
      url: '/bpm/proc/main/texml',
      method: 'get',
      params:{temid:props.temid}
    }) as any;
    form.value.tarno = map.tarno;
    form.value.tarna = map.tarna;
    form.value.tamen = map.tamen;
    state.toExmen = map.tarno + '.' + map.tarna + '(' + map.tamen + ')';

    state.xml=map.xml;
    await BpmnStore.importXML(state.xml);
    const elementRegistry = BpmnStore.getModeler().get('elementRegistry');
    const list1 = [] as any;
    elementRegistry.forEach((item: any) => {
      if (item.id == 'N1') {
        list1.push(item);
      }
    });

    const list2 = [] as any;
    elementRegistry.forEach((item: any) => {
      if (item.id == 'L1') {
        list2.push(item);
      }
    });

    const list3 = [] as any;
    elementRegistry.forEach((item: any) => {
      if (item.id == 'N2') {
        list3.push(item);
      }
    });

    let modeling = BpmnStore.modeler.get('modeling');
    modeling.setColor(list1, {fill: '#e4feef'});
    modeling.setColor(list2, {stroke: '#009900'});
    modeling.setColor(list3, {fill: '#fed6d6'});
  }
};


// const fileList = ref<UploadUserFile[]>([
// 	{
// 		name: 'food.jpeg',
// 		url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
// 	},
// 	{
// 		name: 'food2.jpeg',
// 		url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100',
// 	},
// ])

</script>

<style scoped>

</style>
